﻿<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.15.13/lib/theme-chalk/index.min.css" />
		<script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/element-ui@2.15.13/lib/index.min.js"></script>
		<style type="text/css">
			.product {
				display: flex;
				flex-direction: column;
				align-items: center;
			}
			.product-img img {
				max-width: 800px;
				max-height: 600px;
			}
			.product-thumb {
				margin-top: 20px;
			}
			.el-carousel__item img {
				max-width: 160px;
				max-height: 120px;
				cursor: pointer;
			}
		</style>
	</head>
	<body>
			<div class="product" id="app">
				<div class="product-img">
					<img :src="currentImg" alt="">
				</div>
				<div class="product-thumb">
					<el-carousel trigger="click" arrow="always">
						<el-carousel-item v-for="(img, index) in imgs" :key="index">
							<img :src="img" alt="" @click="currentImg = img">
						</el-carousel-item>
					</el-carousel>
				</div>
			</div>
		<script>
			var app = new Vue({
				el: "#app",
				data: {
					imgs: [
						'https://picsum.photos/id/237/800/600',
						'https://picsum.photos/id/238/800/600',
						'https://picsum.photos/id/239/800/600',
						'https://picsum.photos/id/240/800/600',
						'https://picsum.photos/id/241/800/600',
					],
					currentImg: 'https://picsum.photos/id/237/800/600',
				},
				methods: {
					//
				}
			});
		</script>
	</body>
</html>
